.app-details {
  position: relative;
  @media #{$desktop} {
    padding: 24px 32px;
  }
  @media #{$mobile} {
    padding: 0px 8px;
  }
  background-color: $app-details-background-color;
  color: $app-details-foreground-color;

  &.dev-background {
    background-image: url("/devmode.png");
    background-size: auto;
    background-color: #ccc;
  }

  >.app-details-widget {
    @extend %app-details-widget;
  }
  >.newer-version, >.older-version {
    background-color: darken($app-details-background-color, 10%);
    >p {
      >button {
        @extend %button-base;
        @extend %button-primary;
      }
    }
  }

  >.search-row {
    @extend %search-row;
    margin-bottom: 12px;
    clear: both;
  }

  >.trash-explanation {
    @extend %trash-explanation;
  }

  >.no-grains {
    width: 100%;
    background-color: white;
    overflow: hidden;  // don't let margins escape box
    >p {
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  >table.grain-list-table {
    @extend %grain-table;
  }
}

%app-details-widget {
  margin: 0;
  padding: 0;
  position: relative;
  >.app-icon {
    position: absolute;
    @extend %pseudo-img-tag;
    width: 128px;
    height: 128px;
  }

  >.app-details-box {
    margin-left: 128px;
    padding-left: 12px;
    min-height: 128px;
    margin-bottom: 12px;

    >h1.app-title {
      margin: 0px;
      font-weight: normal;
      display: block;
      float: left;
    }

    >ul.app-links {
      display: block;
      float: right;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-left: 0px;
      list-style: none;
      >li {
        display: inline-block;
        float: left;
        margin-left: 24px;

        >a {
          padding-left: 28px;

          background-size: 24px 24px;
          background-position: 0px center;
          background-repeat: no-repeat;
          &.website-link {
            background-image: url("/web-m.svg");
          }
          &.app-market-link {
            background-image: url("/appmarket-m.svg");
          }
          &.source-code-link {
            background-image: url("/source-m.svg");
          }
          &.bug-report-link {
            background-image: url("/bug-m.svg");
          }
          // TODO: these need more styles and less overrides
          display: inline-block;
          font-weight: normal;
          color: #000000;
          &:hover {
            color: $sandstorm-purple-color;
          }
        }
      }
    }

    >div.info-row {
      display: block;
      clear: both;
      float: left;
      border-top: 1px solid #909090;
      padding-top: 4px;
      width: 100%;
      >ul.package-info {
        position: relative;
        margin: 0px;
        padding: 0px;
        list-style: none;
        >li {
          display: block;
          float: left;
          margin-right: 32px;
          >span {
            padding-left: 8px;
            display: block;
            clear: both;
          }
          >span.label, >span.name {
            font-weight: 600;
          }
          >button.show-authorship-button {
            @include unstyled-button();
            padding-left: 8px;
            padding-right: 24px;

            >.expanded-icon {
              font-size: 10px;
              @extend .icon;
              @extend .icon-down;
            }
            &.expanded>.expanded-icon {
              @extend .icon-up;
            }
          }
        }
        display: block;
        float: left;
      }

      >button.uninstall-button, >button.restore-button, >button.toggle-show-trash {
        @extend %button-base;
        @extend %button-secondary;
        display: block;
        float: right;
        min-height: 32px;
        margin-left: 4px;
      }
    }

    >div.publisher-details {
      display: block;
      clear: both;
      background-color: #ffffff;
      vertical-align: top;

      >p.no-fingerprint {
        padding: 8px;
      }

      >p.has-fingerprint {
        vertical-align: top;
        padding-left: 8px;
        @media #{$desktop} {
          display: inline-block;
          max-width: 30%;
        }
        @media #{$mobile} {
          display: block;
          width: 100%;
        }
      }

      >ul.publisher-proofs {
        @media #{$desktop} {
          display: inline-block;
          width: 65%;
        }
        @media #{$mobile} {
          display: block;
          width: 100%;
        }
        padding: 8px;
        list-style: none;
        >li.publisher-proof {
          display: block;
          >a, >span.pgpkey {
            display: block;
            padding-left: 32px;
            background-size: 24px 24px;
            background-position: 0px center;
            background-repeat: no-repeat;
          }
          >span.pgpkey {
            background-image: url("/key-m.svg");
            >span {
              padding-right: 4px;
              overflow-wrap: break-word;
            }
          }
          >a.keybase {
            background-image: url("/keybase-m.svg");
          }
          >a.twitter {
            background-image: url("/twitter-m.svg");
          }
          >a.github {
            background-image: url("/github-m.svg");
          }
          >a.dns {
            background-image: url("/link-m.svg");
          }
          >a.https {
            background-image: url("/link-m.svg");
          }
        }
      }

      &.hide {
        display:none;
      }
    }
  }
}
